<template>
  <!-- 雷达图 -->
  <div ref="main" style="width: 100%; height: 300px"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.main);
    const option = {
      //   title: {
      //     text: 'Basic Radar Chart',
      //   },
      legend: {
        data: ['访问', '购买'],
        bottom: '-5px',
      },

      tooltip: {
        trigger: 'item',
      },

      radar: {
        //   菱形变成原型 转换率内块
        // shape: 'circle',
        indicator: [{ name: 'Sales' }, { name: 'Administration' }, { name: 'Customer Support' }, { name: 'Development' }, { name: 'Marketing' }],
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          areaStyle: {},
          data: [
            {
              value: [4200, 3000, 9000, 35000, 23000, 8000],
              name: '访问',
            },
            {
              value: [5000, 6000, 8000, 16000, 8000, 21000],
              name: '购买',
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>

<style></style>
